<div style="margin-top: 200px">
    <div class="row">
        <div class="col-lg-6 col-xs-6 col-md-6" id="ShopBar" style="height: 400px"></div>
        <div class="col-lg-6 col-xs-6 col-md-6" id="ShopPie" style="height: 400px"></div>
    </div>
</div>

<script>
    var width=document.body.clientWidth/12;
    $("#ShopBar").width((width*10)/2-50);
    $("#ShopPie").width((width*10)/2-50);
    var mymapShopBar = echarts.init(document.getElementById("ShopBar"));
    var mymapShopPie = echarts.init(document.getElementById("ShopPie"));
    $(function () {
        GetShopBar();
        GetShopPie();
    })

    ////店铺统计柱状图
    function GetShopBar() {
        optionShopBar = {
            title: {
                text: '绵阳市A类、B类营业厅数量统计',
                subtext: '纯属虚构',
                textStyle: {
                    color: '#4faedd'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['A类', 'B类']
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                data: ['涪城区', '游仙区', '高新区', '科创园区', '农科区', '农科区', '仙海区', '三台县', '盐亭县', '梓潼县', '安县', '北川县', '平武县', '江油市'],
                axisLine: {
                    lineStyle: {
                        color: '#008acd',
                        width: 3, //这里是为了突出显示加上的
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#008acd',
                        width: 2, //这里是为了突出显示加上的
                    }
                }
            }],
            series: [{
                name: 'A类营业厅',
                type: 'bar',
                data: [15, 22, 14, 52, 14, 42, 23, 52, 33, 42, 37, 15, 25, 65],
                itemStyle: {
                    normal: {
                        color: '#b6a2de',
                        barBorderRadius: [5, 5, 0, 0]
                    }
                }
            },
                {
                    name: 'B类营业厅',
                    type: 'bar',
                    data: [45, 38, 51, 22, 42, 35, 47, 47, 44, 52, 50, 42, 43, 49],
                    itemStyle: {
                        normal: {
                            color: '#2ec7c9',
                            barBorderRadius: [5, 5, 0, 0]
                        }
                    }
                }
            ]
        };

        mymapShopBar.setOption(optionShopBar);
        window.onresize = function () {
            mymapShopBar.resize();
        };
    }

    ////店铺统计饼图
    function GetShopPie() {
        optionShopPie = {
            title: {
                text: '各区店铺占比统计',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: 10,
                top: 30,
                bottom: 20,
                data: ['涪城区', '游仙区', '高新区', '科创园区', '农科区', '仙海区', '三台县', '盐亭县', '梓潼县', '安县', '北川县', '平武县', '江油市']
            },
            color: ['#2ec7c9', '#b6a2de', '#7bc0f2', '#ffb980', '#d87a80', '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa', '#07a2a4', '#9a7fd1', '#588dd5', '#84f73d'],
            series: [{
                name: '姓名',
                type: 'pie',
                radius: '55%',
                center: ['50%', '40%'],
                data: [{
                    name: '涪城区',
                    value: '335'
                },
                    {
                        name: '游仙区',
                        value: '442'
                    },
                    {
                        name: '高新区',
                        value: '320'
                    },
                    {
                        name: '科创园区',
                        value: '423'
                    },
                    {
                        name: '农科区',
                        value: '210'
                    },
                    {
                        name: '仙海区',
                        value: '236'
                    },
                    {
                        name: '三台县',
                        value: '956'
                    },
                    {
                        name: '盐亭县',
                        value: '856'
                    },
                    {
                        name: '梓潼县',
                        value: '754'
                    },
                    {
                        name: '安县',
                        value: '965'
                    },
                    {
                        name: '北川县',
                        value: '1235'
                    },
                    {
                        name: '平武县',
                        value: '635'
                    },
                    {
                        name: '江油市',
                        value: '965'
                    }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        mymapShopPie.setOption(optionShopPie);
        window.onresize = function () {
            mymapShopPie.resize();
        };
    }
</script>